<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>指令</title>
    <script src="https://cdn.bootcss.com/moment.js/2.24.0/moment.min.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.common.dev.js"></script>
    <style>
        [v-cloak]{display: none;}
    </style>
</head>
<body>
<!--
v-text: 绑定标签的text
v-html: 绑定标签的html
v-if: v-else: 条件显示
v-for: 遍历
v-on: 事件监听，一般简写成@
v-bind：强制属性绑定 可省略 v-bind
v-model: 双向数据绑定
ref: 为元素注册唯一标识，vue对象通过$refs访问
v-cloak: 方式闪现表达式，与 [v-cloak]{display: none;}配置


-->
    <div id="demo">
        <p ref="content">内容</p><!--ref指令-->
        <button @click="hint">提示</button>
        <p v-cloak>{{msg}}</p><!--防止闪现表达式（没获取到数据时防止页面原样显示表达式）-->
        <p v-upper-text="txt"></p> <!--使用自定义指令-->
        <p v-lower-text="txt"></p> <!--使用自定义指令-->
    </div>
    <script>
        /**
         * 自定义全局指令
         * 指令名（不要 'v-'）
         * 函数：
         * el：使用指令的标签元素
         * binding: 标签绑定的对象
         */
        Vue.directive('upper-text',(el, binding)=>{
            el.textContent = binding.value.toUpperCase();
        });

        new Vue({
            el: '#demo',
            data: {
                msg: '消息',
                txt: 'NBA I LOVE this Game'
            },
            methods:{
                hint(){
                    alert(this.$refs.content.textContent);/*显示ref=content的内容*/
                }
            },
            directives:{ //局部指令 只在当前vue实例有效
                'lower-text': function (el, binding) {
                    el.textContent = binding.value.toLowerCase();
                }
            }
        });
    </script>
</body>
</html>